<template>
  <!-- 发布表单弹窗组件 -->
  <div id="public-art" v-show="isShowPublicArt">
    <div class="mask">
      <div class="small">
        <div class="canecel-btn"><i class="icon-quxiao iconfont" @click="$store.dispatch('showPublicArt',false)"></i></div>
        <div class="form">
          <el-input
            v-model="fromParams.artName"
            placeholder="艺术品名称"
          ></el-input>
          <el-input
            v-model="fromParams.price"
            placeholder="价格"
            type='number'
          ></el-input>
          <el-upload
            action=""
            accept="image/jpeg,image/png"
            :on-change="onUploadChange"
            :on-remove="onRemove"
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取</el-button
            >
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不能超过1m
            </div>
          </el-upload>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { saveImageOnIpfs } from "@/utils/ipfsUtil";
import contract_abi from '@/contract/artwork_trade_contract.json'
import {mapState} from 'vuex'
export default {
  name: "PublicArt",
  data() {
    return {
      fromParams: {
        artName: "",
        imageHash: "",
        price:0
      },
      imgFile: null,
    };
  },
  mounted() {
    // 链接获取合约实例
    this.ContractAbi = new this.$web3.eth.Contract(contract_abi, '0xD24692f4c041d034d7c79b0E342264018606FF27')
  },
  computed:{
    ...mapState({
      isShowPublicArt:store=>store.publicArt.isShowPublicArt
    })
  },
  methods: {
    async submitUpload() {
      if (this.imgFile == null || this.artName == '') {
        this.$message.error("未选择上传的艺术品");
        return;
      }
      let {artName,price} = this.fromParams
      let ContractAbi = this.ContractAbi
      var reader = new FileReader();
      let that = this
      let accounts = await this.$web3.eth.getAccounts()
      console.log(accounts)
      reader.readAsArrayBuffer(this.imgFile);
      reader.onloadend = function () {
        // 保存图片到ipfs，获取图片hash
        saveImageOnIpfs(reader).then((hash) => {
          // 发起合约交易
          ContractAbi.methods.addArtwork(artName,price, hash)
          .send({from:accounts[0]}).then(res=>{
            console.log(res)
            // 重新获取数据
            that.$store.dispatch('allArtworks')
            // 关闭弹出框
            that.$store.dispatch('showPublicArt', false)
          })
          .catch(err=>console.log(err))
        });
      };
    },

    // 取消选取
    onRemove() {
      this.imgFile = null;
    },

    // 选取图片
    onUploadChange(file) {
      const isIMAGE =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isIMAGE) {
        this.$message.error("只能上传jpg/png图片!");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }

      this.imgFile = file.raw;
    },
  },
};
</script>

<style lang='less'>
#public-art {
  .mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    .small {
      padding: 15px;
      width: 400px;
      height: 300px;
      border-radius: 10px;
      background: #fff;
      i {
        font-weight: bold;
        color: #666;
        font-size: 20px;
        float: right;
      }
    }
  }
}
</style>